<template>
  <div class="searchPage">
    <div class="searchTop">
      <el-input
        v-model="searchValue"
        placeholder="请输入杠题名称"
        prefix-icon="el-icon-search"
        debounce="600"
        @input="startSearch()"
      />
    </div>
    <div class="subjectInfo">
      <bar-subject-item :subject-by-search="subjectBySearch" />
    </div>
  </div>
</template>
<script>
import eventBus from '@/api/eventBus';
import BarSubjectItem from '../../../components/BarSubjectItem';
import { vagueSearch } from '../../../api/subject';
import { debounce } from '../../../utils/validate';
export default {
  name: 'SubjectSearch',
  components: { BarSubjectItem },
  data() {
    return {
      searchValue: '',
      subjectBySearch: []
    };
  },
  mounted() {
    eventBus.$emit('changeTitle', '杠题搜索');
  },
  beforeDestroy() {
    eventBus.$emit('changeTitle', '首页');
  },
  methods: {
    startSearch: debounce(1000, function () {
      if (this.searchValue === '') { this.subjectBySearch = []; return; }
      vagueSearch(this.searchValue).then(res => {
        if (res.data.code === 200) {
          this.subjectBySearch = res.data.data;
        }
      });
    })
  }
};
</script>
<style lang="scss">
.searchPage{
  .el-input{
    width: 90%;
    margin: 10px auto;
    border-radius: 20px;
    .el-input__inner{
      border-radius: 20px;
      border: none;
      background: #F2F6FC;
    }
  }
}
</style>
<style lang="scss" scoped>
.searchPage{
  position: relative;
  width: 100%;
  height: 100%;
  .searchTop{
    width: 100%;
    height: 60px;
    display: flex;
    background: #fff;
    justify-content: center;
    align-items: center;
  }
  .subjectInfo{
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
    height: calc(100% - 60px);
  }
}
</style>
